<template>
    <div class="editClass">
        
        <el-dialog append-to-body v-model="classDialog" title="修改班级" width="600" >
            <el-form :model="classForm" :rules="classRules" ref="userRef" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="专业方向" prop="marjor_id">
                            <el-select @change="handleInputChange" v-model="classForm.marjor_id" placeholder="请选择专业方向">
                                <el-option v-for="item in majorOptions" :key="item.id" :label="item.name"
                                :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                   
                        <el-form-item label="班级名称" prop="cla_name">
                            <el-input @input="handleInputChange" v-model.trim="classForm.cla_name" placeholder="请输入班级名称" maxlength="30" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注信息">
                            <el-input @input="handleInputChange" v-model.trim="classForm.cla_desc" placeholder="请输入备注信息" maxlength="30" />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button :disabled="isDisabled" @click="updateClass" type="primary">
                        确定  
                    </el-button>
                    <el-button @click="classDialog = false">取消</el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue" 
import { majorList} from "@/api/admin/major"
import { upClass} from "@/api/banji/classadmin"
import { ElMessage } from 'element-plus';
import useUserStore from "@/store/modules/user";
const emits = defineEmits([ 'upClaSuccess']);
const props=defineProps({
    marjor_id:{
        type:Number,
        
    },
    nodeName:{
        type:String
    },
    arch_id:{
        type:Number
    },
    nodeId:{
        type:String 
    }

})


const classDialog=ref(false)

const isDisabled=ref(true)

defineExpose({
    classDialog
})
const classForm=ref({
    id:"",
    marjor_id:"",
    cla_name:"",
    college_arch_stu_group_id:"",
    cla_desc:"",
    tenant_id:useUserStore().tenant_id
})

const majorOptions=ref([

])
const classRules=ref({
    marjor_id: [{ required: true, message: "专业不能为空", trigger: "blur" }],
    cla_name: [{ required: true, message: "班级名称不能为空", trigger: "blur" }],

})


// 获取专业列表
const getMajorList = () => {
    majorList().then(res => {
        majorOptions.value = res

    })
}


// 输入框内容改变
const handleInputChange=(v)=>{

 
    
    isDisabled.value=false
    
}


watch(() => props, (nv) => {
    console.log(nv);
    
         classForm.value.marjor_id=nv.marjor_id
         classForm.value.cla_name=nv.nodeName
         classForm.value.college_arch_stu_group_id=nv.arch_id
         classForm.value.id=nv.nodeId
    },{
        immediate:true,
        deep:true
    });
// 修改
const updateClass=()=>{

    let data={

        cg_class:classForm.value
    }

    upClass(data).then(res=>{
        if(!res){
            ElMessage.success("修改成功")
            emits("upClaSuccess")
            classDialog.value=false
            isDisabled.value=true
        }else{
            ElMessage.error(res.response.data)
        }
            
    })
    

}

getMajorList()
</script>

<style lang="scss" scoped>

</style>